<template>
    <div class="user-list">
        <a-row>
            <a-col :span="4">
                <div class="form-item">
                    <span class="form-item-label">用户名</span>
                    <a-input class="form-item-input" placeholder="请输入用户名" allowClear></a-input>
                </div>
            </a-col>
            <a-col :span="4">
                <div class="form-item">
                    <span class="form-item-label">角色</span>
                    <a-select class="form-item-input" placeholder="请选择角色"  allowClear>
                        <a-select-option value="1">管理员</a-select-option>
                        <a-select-option value="2">运营员</a-select-option>
                    </a-select>
                </div>
            </a-col>
            <a-col :span="2">
                <a-button type="primary">搜索</a-button>
            </a-col>
            <a-col :offset="12" :span="2">
                <a-button type="primary"><UserAddOutlined />添加用户</a-button>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
import { UserAddOutlined } from '@ant-design/icons-vue'
import { defineComponent } from 'vue'
export default defineComponent({
    components: {
        UserAddOutlined
    },
    setup(){

    }
})
</script>

<style lang="scss">
.user-list {
    padding: 24px;
    .form-item {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding-right: 20px;
        .form-item-label {
            display: inline-block;
            margin-right: 10px;
        }
        .form-item-input {
            flex: 1;
        }
    }
}
</style>